<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="选择一级种类名称:">
          <el-select v-model="pid,value" placeholder="选择一级种类" @change="changeLevel2(value)">
            <el-option value='' label="请选择"></el-option>
            <el-option @click.native="getPid(item.pid)"
                       v-for="item in fileKind"
                       :key="item.id"
                       :label="item.kindName"
                       :value="item.id">
            </el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="选择二级种类名称:" v-if="fileKind2!=null&&fileKind2!=''">
          <el-select v-model="value2" placeholder="选择二级种类" @change="changeLevel3(value2)">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind2"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择三级种类名称:" v-if="fileKind3!=null&&fileKind3!=''">
          <el-select v-model="value3" placeholder="选择三级种类">
            <el-option value='' label="请选择"></el-option>
            <el-option
                v-for="item in fileKind3"
                :key="item.id"
                :label="item.kindName"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="产品名称:">
          <el-input v-model="name" placeholder="产品名称"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="init2">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            label="产品编号"
            width="180"
            prop="productId">
        </el-table-column>
        <el-table-column
            label="产品名称"
            width="180"
            prop="productName">
        </el-table-column>
        <el-table-column
            label="工厂名称"
            width="180"
            prop="factoryName">
        </el-table-column>
        <el-table-column
            label="产品简称"
            width="180"
            prop="productNick">
        </el-table-column>
        <el-table-column
            label="用途类型"
            width="180">
          <!--prop="type"        -->
          <template slot-scope="scope">
            <p v-if="tableData[scope.$index].type=='Y001-1'">商品</p>
          </template>
        </el-table-column>
        <el-table-column
            label="档次级别"
            width="180">
          <!--  prop="productClass"        -->
          <template slot-scope="scope">
            <p v-if="tableData[scope.$index].productClass=='D001-1'">高档</p>
            <p v-else-if="tableData[scope.$index].productClass=='D001-2'">中档</p>
            <p v-else-if="tableData[scope.$index].productClass=='D001-3'">低档</p>
            <p v-else-if="tableData[scope.$index].productClass=='null'||tableData[scope.$index].productClass==''"
               style="color: red">数据展示错误</p>
          </template>
        </el-table-column>
        <el-table-column
            label="一级种类名称"
            width="180"
            prop="firstKindName">
        </el-table-column>
        <el-table-column
            label="二级种类名称"
            width="180"
            prop="secondKindName">
        </el-table-column>
        <el-table-column
            label="三级种类名称"
            width="180"
            prop="thirdKindName">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="160">
          <template slot-scope="scope">

            <!--          -->
            <el-button @click="handleClick(scope.row)" type="text" size="medium ">设计物料组成单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--   @prev-click="init2(Number(pageNum)-1)"
              @next-click="init2(Number(pageNum)+1)"-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          :current-page="Number(pageNum)"
          :page-sizes="[2, 4, 8, 16]"
          :page-size="Number(pageSize)"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(total)">
      </el-pagination>
    </div>

    <!-- 物料清单-->
    <el-dialog title="制定物料组成设计单" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
      <el-form :model="form" label-width="80px">
        <el-form-item>
          <!--          添加再次打开一个表格-->
          <el-button type="primary" icon="el-icon-edit" @click="addModule"><label>添加物料</label></el-button>
          <br>

          <el-button type="danger" icon="el-icon-delete" @click="removeModuleData"><label>删除物料</label></el-button>
        </el-form-item>

        <el-form-item label="产品名称:">
          <label v-model="form.productName">
            <b v-text="form.productName"></b>
          </label>
          <label style="position: relative;left: 300px;">产品编号:
            <b>
              <label v-model="form.productId"><b v-text="form.productId"></b></label>
            </b>
          </label>

        </el-form-item>
        <!--        <el-form-item label="设计人:">
                  <el-input v-model="form.designer" style="width: 300px;"></el-input>
                </el-form-item>-->

        <!--        表格-->

        <!--        productId:'',-->
        <!--        productName:'',-->
        <!--        type:'',-->
        <!--        productDescribe:'',-->
        <!--        amountUnit:'',-->
        <!--        costPrice:'',-->
        <!--        amount:'',-->
        <!--        subtotal:''-->
        <div>
          <el-table
              :data="moduleData"
              style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="物料编号:"
                width="180"
                prop="productId">
            </el-table-column>
            <el-table-column
                label="物料名称"
                width="180"
                prop="productName">
            </el-table-column>
            <el-table-column
                label="用途类型"
                width="180">
              <template slot-scope="scope">
                <p v-if="moduleData[scope.$index].type=='Y001-1'">商品</p>
                <p v-if="moduleData[scope.$index].type=='Y001-2'">物料</p>
              </template>
            </el-table-column>
            <el-table-column
                label="描述"
                width="180"
                prop="productDescribe">
            </el-table-column>
            <el-table-column
                label="数量"
                width="180"
                prop="amount">
            </el-table-column>
            <el-table-column
                label="单位"
                width="180"
                prop="amountUnit">
            </el-table-column>
            <el-table-column
                label="计划成本单价(元)"
                width="180"
                prop="costPrice">
            </el-table-column>
            <el-table-column
                label="小计(元)"
                width="180"
                prop="subtotal">
            </el-table-column>
          </el-table>
        </div>


        <el-form-item label="此产品登记人:" label-width="100px">
          <label v-model="form.register"><b>{{ form.register }}</b></label>

          <label style="position: relative;left:300px">登记时间:
            <b>
              <label v-text="currentTime"></label>
            </b>
          </label>

        </el-form-item>
        <el-form-item label="设计要求:">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="moduleDescribe">
          </el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false,moduleData=[]">取消</el-button>
        <el-button type="primary" @click="addModuleToController">确 定</el-button>
      </div>
    </el-dialog>


    <!--    添加物料清单-->
    <el-dialog title="添加物料清单" :visible.sync="addABillOfMaterials" width="80%">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="选择一级种类名称:">
            <el-select v-model="pid11,value11" placeholder="选择一级种类" @change="changeLevel22(value11)">
              <el-option value='' label="请选择"></el-option>
              <el-option @click.native="getPid11(item.pid)"
                         v-for="item in fileKind11"
                         :key="item.id"
                         :label="item.kindName"
                         :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="选择二级种类名称:" v-if="fileKind22!=null&&fileKind22!=''">
            <el-select v-model="value22" placeholder="选择二级种类" @change="changeLevel33(value22)">
              <el-option value='' label="请选择"></el-option>
              <el-option
                  v-for="item in fileKind22"
                  :key="item.id"
                  :label="item.kindName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择三级种类名称:" v-if="fileKind33!=null&&fileKind33!=''">
            <el-select v-model="value33" placeholder="选择三级种类">
              <el-option value='' label="请选择"></el-option>
              <el-option
                  v-for="item in fileKind33"
                  :key="item.id"
                  :label="item.kindName"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="产品名称:">
            <el-input v-model="name11" placeholder="产品名称"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="init22">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table
            :data="tableData11"
            style="width: 100%">
          <el-table-column
              label="产品编号"
              width="180"
              prop="productId">
          </el-table-column>
          <el-table-column
              label="产品名称"
              width="180"
              prop="productName">
          </el-table-column>
          <el-table-column
              label="工厂名称"
              width="180"
              prop="factoryName">
          </el-table-column>
          <el-table-column
              label="产品简称"
              width="180"
              prop="productNick">
          </el-table-column>
          <el-table-column
              label="用途类型"
              width="180">
            <!--prop="type"        -->
            <template slot-scope="scope">
              <p v-if="tableData11[scope.$index].type=='Y001-1'">商品</p>
              <p v-if="tableData11[scope.$index].type=='Y001-2'">物料</p>
            </template>
          </el-table-column>
          <el-table-column
              label="档次级别"
              width="180">
            <!--  prop="productClass"        -->
            <template slot-scope="scope">
              <p v-if="tableData11[scope.$index].productClass=='D001-1'">高档</p>
              <p v-else-if="tableData11[scope.$index].productClass=='D001-2'">中档</p>
              <p v-else-if="tableData11[scope.$index].productClass=='D001-3'">低档</p>
              <p v-else-if="tableData11[scope.$index].productClass=='null'||tableData11[scope.$index].productClass==''"
                 style="color: red">数据展示错误</p>
            </template>
          </el-table-column>
          <el-table-column
              label="一级种类名称"
              width="180"
              prop="firstKindName">
          </el-table-column>
          <el-table-column
              label="二级种类名称"
              width="180"
              prop="secondKindName">
          </el-table-column>
          <el-table-column
              label="三级种类名称"
              width="180"
              prop="thirdKindName">
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="160">
            <template slot-scope="scope">

              <!--          -->
              <el-button @click="addMaterial(scope.row)" type="text" size="medium ">添加物料</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChange11"
            :current-page="Number(pageNum11)"
            :page-sizes="[2, 4, 8, 16]"
            :page-size="Number(pageSize11)"
            @current-change="handleCurrentChange11"
            layout="total, sizes, prev, pager, next, jumper"
            :total="Number(total11)">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "../request.js"
import axios from "axios";

export default {
  name: "module",
  data() {
    return {
      //物料数据
      moduleData: [],
      //物料数量
      moduleCount: '',
      fileKind: [],
      name: '',
      fileKind2: [],
      fileKind22: [],
      fileKind3: [],
      fileKind33: [],
      fileKind11: [],
      value: '',
      pageNum: 0,
      pageNum11: 0,
      pageSize: '',
      pageSize11: '',
      total: '',
      total11: '',
      pid: '',
      value2: '',
      value3: '',
      value22: '',
      value33: '',
      value11: '',
      tableData: [],
      formInline: {
        user: '',
        region: ''
      },
      multipleSelection: [],
      name11: '',
      currentPage4: 4,
      dialogFormVisible: false,
      addABillOfMaterials: false,
      pid11: '',
      //当前时间
      currentTime: '',
      form: {
        /**
         * 设计ID
         */
        designId: '',
        //产品ID
        productId: '',
        //产品名
        productName: '',
        //第一种类id
        firstKindId: '',
        //第一名称
        firstKindName: '',
        //第二id
        secondKindId: '',
        //第二名称
        secondKindName: '',
        //第三id
        thirdKindId: '',
        //第三名称
        thirdKindName: '',
        //设计者
        designer: '',
        //设计要求
        moduleDescribe: '',
        //成本价格总和
        costPriceSum: '',
        //登记人
        register: '',
        //当前时间
        currentTime: ''
      },
      moduleDescribe: '',
      formLabelWidth: '120px',
      tableData11: [],
      //添加的数据
      addModuleData: {
        id: '',
        productId: '',
        productName: '',
        firstKindId: '',
        firstKindName: '',
        secondKindId: '',
        secondKindName: '',
        thirdKindId: '',
        thirdKindName: '',
        moduleDescribe: '',
        designId: '',
        designer: '',
        costPriceSum: '',
        register: '',
        registerTime: '',
        checker: '',
        checkTime: '',
        changer: '',
        changeTime: '',
        checkTag: '',
        changeTag: '',
        createTime: '',
        updateTime: '',
        deleted: ''
      },
      //添加详细模块物料表
      addModuleDetails: []
    }
  },
  methods: {
    open(message, type) {
      this.$message({
        showClose: true,
        message: message,
        type: type
      });
    },
    addModuleToController() {
      if (this.moduleData.length < 1) {
        this.open("至少要添加一个物料数据!", 'error')
        this.dialogFormVisible = false;
        return;
      }
      this.addModuleData.moduleDescribe = this.moduleDescribe;
      this.addModuleDetails = this.moduleData;
      this.addModuleData.designer = this.form.designer;
      let map = {
        'module': this.addModuleData,
        'moduleDetails': this.addModuleDetails
      }
      axios.post("http://localhost:8150/module/addModule", map).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        if (data.data.flag) {
          this.open("新增成功!", 'success')
        } else {
          this.open("新增失败!", 'error')
        }
        this.dialogFormVisible = false;
        this.moduleData = [];
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    removeModuleData() {
      let data = this.multipleSelection;
      let moduleData = this.moduleData;
      for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < moduleData.length; j++) {
          if (data[i].moduleId == moduleData[j].moduleId) {
            console.log("data[i].moduleId:" + data[i].moduleId)
            console.log(j)
            moduleData.splice(j, 1);
          }
        }
      }
    },
    handleDialogClose() {
      this.moduleData = [];
      this.dialogFormVisible = false;
    },
    addModule() {
      this.init11();
      this.init22();
      this.addABillOfMaterials = true;
    },
    handleEdit(index, row) {
      console.log(index, row);
    }
    ,
    handleDelete(index, row) {
      console.log(index, row);
    },
    onSubmit() {
      console.log('submit!');
    },
    init2() {
      // console.log(this.pageNum)
      axios.get("http://localhost:8150/file/queryProduct", {
        params: {
          designModuleTag: 'W001-0',
          firstId: this.value,
          secondId: this.value2,
          threeId: this.value3,
          name: this.name,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 'Y001-1',
          'checkTag': 'S001-1'
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.tableData = data.data.data.records;
        this.pageNum = data.data.data.current;
        this.pageSize = data.data.data.size;
        this.total = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    }, init22() {
      // console.log(this.pageNum)
      axios.get("http://localhost:8150/file/queryProduct", {
        params: {
          firstId: this.value11,
          secondId: this.value22,
          threeId: this.value33,
          name: this.name11,
          pageNum: this.pageNum11,
          pageSize: this.pageSize11,
          type: '1'
        }
      }).then(data => {
        if (data.data.flag==false) {
          this.$message({
            showClose: true,
            message: data.data.message,
            type: data.data.flag == true ? "success" : "error"
          })
          return;
        }
        this.tableData11 = data.data.data.records;
        this.pageNum11 = data.data.data.current;
        this.pageSize11 = data.data.data.size;
        this.total11 = data.data.data.total;
      }).catch(e => {
        alert("错误信息为:" + e)
      })
    },
    init() {
      /**
       * 获取下拉框的值
       */
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    },
    init11() {
      /**
       * 获取下拉框的值
       */
      axios.get("http://localhost:8150/config-file-kind/displayType").then(data => {
        this.fileKind11 = data.data.data;
      }).catch(e => {
        alert("错误信息为:" + e)
      });
    }, changeLevel2(id) {

      console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind.length; i++) {
        for (let j = 0; j < this.fileKind[i].list.length; j++) {
          if (id === this.fileKind[i].list[j].pid) {
            this.fileKind2[a] = this.fileKind[i].list[j];
            a++;
          } else {
            this.fileKind2 = [];
            this.fileKind3 = [];
            this.value2 = '';
            this.value3 = '';
          }
        }

      }
    }, changeLevel22(id) {

      console.log("value:" + id)
      let a = 0;
      for (let i = 0; i < this.fileKind11.length; i++) {
        for (let j = 0; j < this.fileKind11[i].list.length; j++) {
          if (id === this.fileKind11[i].list[j].pid) {
            this.fileKind22[a] = this.fileKind11[i].list[j];
            a++;
          } else {
            this.fileKind22 = [];
            this.fileKind33 = [];
            this.value22 = '';
            this.value33 = '';
          }
        }

      }
    }, changeLevel33(id) {
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind22.length; i++) {
        for (let j = 0; j < this.fileKind22[i].list.length; j++) {
          if (id == this.fileKind22[i].list[j].pid) {
            console.log(this.fileKind22[i].list[j].pid)
            this.fileKind33[a] = this.fileKind22[i].list[j];
            a++;
          } else {
            this.fileKind33 = [];
            this.value33 = '';
          }
        }
      }
    }, changeLevel3(id) {
      //  console.log(id)
      let a = 0;

      for (let i = 0; i < this.fileKind2.length; i++) {
        for (let j = 0; j < this.fileKind2[i].list.length; j++) {
          if (id == this.fileKind2[i].list[j].pid) {
            console.log(this.fileKind2[i].list[j].pid)
            this.fileKind3[a] = this.fileKind2[i].list[j];
            a++;
          } else {
            this.fileKind3 = [];
            this.value3 = '';
          }
        }
      }
    }, getPid(id) {
      this.pid = id;
    },
    getPid11(id) {
      this.pid11 = id;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      console.log(`每页 ${val} 条`);
      this.init2();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.init2();
    }, handleSizeChange11(val) {
      this.pageSize11 = val;
      console.log(`每页 ${val} 条`);
      this.init22();
    },
    handleCurrentChange11(val) {
      this.pageNum11 = val;
      console.log(`当前页: ${val}`);
      this.init22();
    },
    handleClick(row) {
      let addModuleData = this.addModuleData;
      this.currentTime = this.getDate();
      console.log(row);
      this.form.productName = row.productName;
      this.form.productId = row.productId;
      this.form.register = row.register;
      this.form.designer = row.register;
      /**
       * 将row数据添加到addModuleData里面
       */
      addModuleData.productId = row.productId;
      addModuleData.productName = row.productName;
      addModuleData.firstKindId = row.firstKindId;
      addModuleData.firstKindName = row.firstKindName;
      addModuleData.secondKindId = row.secondKindId;
      addModuleData.secondKindName = row.secondKindName;
      addModuleData.thirdKindId = row.thirdKindId;
      addModuleData.thirdKindName = row.thirdKindName;
      // addModuleData.moduleDescribe=this.moduleDescribe;
      this.dialogFormVisible = true;
    },
    getDate() {
      var date = new Date();
      this.form.currentTime = date;
      console.log(date)
      var s = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
      return s;
    },
    addMaterial(row) {
      const newVar = {
        productId: '',
        productName: '',
        type: '',
        productDescribe: '',
        amountUnit: '',
        costPrice: '',
        amount: '',
        subtotal: '',
        id: '',
        parentId: '',
        detailsNumber: '',
        residualAmount: '',
        createTime: '',
        updateTime: '',
        deleted: '',
      };
      let moduleDa = newVar
      let moduleData = this.moduleData;
      let flag = true;
      if (moduleData.length > 0) {
        for (let i = 0; i < moduleData.length; i++) {
          if (moduleData[i].productId == row.productId) {
            flag = false;
            console.log(moduleData[i].amount)
            moduleData[i].amount = moduleData[i].amount + 1;
            moduleData[i].subtotal = moduleData[i].costPrice * moduleData[i].amount;
            moduleDa = [];
            break;
          }
        }
        if (flag === true) {
          moduleDa.amount = 1;
          moduleDa.productId = row.productId;
          moduleDa.productName = row.productName;
          moduleDa.type = row.type;
          moduleDa.productDescribe = row.productDescribe;
          moduleDa.amountUnit = row.personalUnit;
          moduleDa.costPrice = row.costPrice;
          moduleDa.subtotal = row.costPrice;
          // moduleData.designer=row.register;
          moduleData.push(moduleDa);
        }
      } else {
        console.log("经过了else")
        moduleDa.amount = 1;
        moduleDa.productId = row.productId;
        moduleDa.productName = row.productName;
        moduleDa.type = row.type;
        moduleDa.productDescribe = row.productDescribe;
        moduleDa.amountUnit = row.personalUnit;
        moduleDa.costPrice = row.costPrice;
        moduleDa.subtotal = moduleDa.costPrice * moduleDa.amount;
        moduleData.push(moduleDa);
      }
      this.addABillOfMaterials = false;
    }
  }, created() {
    this.init2();
    this.init();
  }
}
</script>

<style scoped>

</style>